<template>
	<view class="goods-container flex">
		<view class="class-container">
			<scroll-view scroll-y="true" class="scroll" >
				<view 
					class="class-item scroll-item" 
					v-for="(item,index) in list" :key="index" 
					:class="activeClassId==index?'class-item-active':''" 
					@click="onClassItem(index)"
				>
					{{item.title}}
				</view>
				<view class="scroll-bottom-box"></view>
			</scroll-view>
		</view>
		<view class="goods">
			<scroll-view scroll-y="true" class="scroll goods-scroll" >
				<view v-for="item in list" :key="item.id" >
					<view class="goods-title" :id="`class-${item.id}`" >
						{{item.title}}
					</view>
					<view class="goods-item scroll-item" v-for="(item,index) in item.list" :key="index" @click="onGoodsDetail(item)">
						<Goods :detail="item" />
					</view>
				</view>
				<view class="scroll-bottom-box"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Goods from '../component/goodsItem.vue'

export default {
	data(){
		return{
			//分类项
			activeClassId:0,
			// 导航滚动高度对象
			scrollHeight:{}
		}
	},
	props:{
		list:{
			type:Array,
			default:()=>[]
		}
	},
	components:{Goods},
	methods:{
		onClassItem(id){
			this.activeClassId = id
		},
		computedHeight(id){
			return new Promise((resolve,reject)=>{
				const query = uni.createSelectorQuery().in(this);
				query
				.select(`#class-${id}`)
				.scrollOffset((data) => {
					resolve(data.scrollTop)
				})
				.exec();
			})
		},
		onGoodsDetail(item){
			item = JSON.stringify(item);
			uni.navigateTo({
				url:`/pages/localLife/view/goodsDetail?detail=${item}`
			})
		}
	},
	watch:{
		list:{
			handler(value){
				console.log(value)
				if(this.list.length==0){
					return 
				}
				this.list.forEach((item)=>{
					this.$nextTick(async ()=>{
						this.computedHeight(item.id).then((res)=>{
							this.scrollHeight[item.id] = res;
						})
						
					})
				})
			},
			immediate:true
		}
	}
}
</script>

<style lang="scss" scoped>
.goods-container{
	height: 100%;
	overflow: hidden;
	.scroll-bottom-box{
		height: 120rpx;
		width: 100%;
	}
	.scroll{
		height: 100%;
		overflow: hidden;
		.goods-title{
			font-size: 28rpx;
			font-weight: bold;
			padding: 12rpx 0;
		}
	}
	.class-container{
		background-color: #f3f3f3;
		width: 180rpx;
		flex-shrink: 0;
		.class-item{
			text-align: center;
			padding:24rpx 0;
			// border-radius: 0 20rpx 20rpx 0;
		}
		.class-item-active{
			text-align: center;
			background-color: white;
		}
	}
	.goods{
		flex-grow: 1;
		padding:0 20rpx;
		background-color: white;
	}
}
</style>